<template>
  <div class="waper_page" style="padding: 20px;">
    <div class="detail">
      <div class="topItem">
        <TopBtn :topBtnList="topBtnList" :className="className"></TopBtn>
        <div class="logo">
          <img src="../../assets/images/img-1.png" alt="">
        </div>
      </div>
      <div class="centerItem">
        <div class="videoBox"></div>
        <DetailBox :size="size" :detailBox="detailBox" :detail="detail" :introduction="introduction"></DetailBox>
      </div>
      <div class="bottItem">
        <NumTabs :total="total"></NumTabs>
      </div>
    </div>
  </div>
</template>

<script>
import TopBtn from '@/components/Widgets/topBtn'
import NumTabs from '@/components/Widgets/numTabs'
import DetailBox from '@/components/Widgets/detailBox'
import { getSubStr } from '@/commont/utils/stringUtil.js'
export default {
  name: "",
  components: { TopBtn, DetailBox, NumTabs },
  props: {},
  data() {
    return {
      // 顶部按钮
      topBtnList: [
        { icon: 'el-icon-search', btnName: '专区内搜索' },
        { icon: 'el-icon-document', btnName: '专区内检索' },
        { icon: 'el-icon-star-off', btnName: '收藏' },
        { icon: 'el-icon-time', btnName: '观看记录' },
        { icon: 'el-icon-back', btnName: '返回' },
      ],
      className: { btnColor: '#cdcdcd', dateTimeColor: '#FFFFFF' },
      // 简介
      size: 'height',
      detailBox: 'detailBox',
      detail: {
        title: '舍我其谁',
        score: '8.1',
        corporate: '天翼视讯传媒有限公司提供',
        year: '2021',
        are: '中国大陆',
        total: '41',
        director: '鞠觉亮',
        actor: '李兰迪，牛骏峰，韩玖诺',
        introduction: '（内容来源于华数）天才青年围棋手胜景初，黑马姿态一战成名，轰动围棋界。从不接受任何采访的他成为了众多媒体争相报道的对象。实习记者程了帮盛景初解围，却被误会为他的女朋友，两人假戏真做等候收到i的就哦啊收到都好都好是等哈收到都好都好的话大撒大撒大大飒飒大苏打大苏打大大是发售公告发布'
      },
      // 集数
      total: 56,
    }
  },
  computed: {
    // 纵向：230；横向150
    introduction() {
      return getSubStr(this.detail.introduction, 230, true)
    }
  },
  watch: {},
  created() { },
  mounted() { },
  updated() { },
  methods: {},
  filters: {},
}
</script>

<style lang="scss" scoped>
.detail {
  width: 1280px;
  height: 720px;
  background: url('../../assets/images/bg.png');
  padding: 20px;

  .topItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px 20px 20px;

    .logo {
      margin-left: 40px;
    }
  }

  .centerItem {
    padding: 5px 50px 15px 40px;
    display: flex;

    // 纵向：width:270,height:350；横向：width:547,height:345
    .videoBox {
      width: 270px;
      height: 350px;
      background-color: #000000;
    }

    // 纵向：width:840；横向：width:563
    .detailBox {
      width: 840px;
      height: 310px;
      margin-left: 40px;
      color: #FFFFFF;
    }
  }

  .bottItem {
    padding: 15px 50px 15px 40px;
    color: #FFFFFF;
  }
}
</style>